/**
 * 导入 Google 的 Inter 字体（400/500/600/700 字重）
 * display=fallback 表示如果字体加载慢，会先显示系统默认字体
 * 对应后文定义的 --font-inter 变量
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=fallback');

/* 导入 Tailwind CSS 的核心样式（base/components/utilities 三层） */
@import 'tailwindcss';

/* 导入 Flatpickr 日期选择器的自定义样式 */
@import './additional-styles/flatpickr.css';

/**
  * 导入自定义工具类样式
  * layer(components) 表示这些样式会被注入到 Tailwind 的 components 层
  * 优先级高于 base 层，但低于 utilities 层
  */
@layer components {
    @import './additional-styles/utility-patterns.css';
}

/**
  * 启用 Tailwind 官方表单插件
  * strategy: base 表示采用基础重置策略：
  * - 为原生表单元素提供最小化重置样式
  * - 不需要额外添加 form-input 等类
  */
@plugin "@tailwindcss/forms" {
    strategy: base;
}

/**
  * 定义自定义变体（Variant）
  * 用法示例：dark:bg-gray-800
  * -------------------------------------------------------------------
  * dark 变体：当元素在带有 .dark 类的元素内时生效
  * 实现原理：通过 :is() 选择器匹配 .dark 的所有后代元素
  */

@custom-variant dark (&:is(.dark *));

/**
  * sidebar-expanded 变体：当侧边栏展开时生效
  * 用法示例：sidebar-expanded:ml-64
  */
@custom-variant sidebar-expanded (&:is(.sidebar-expanded *));

/**
  * 主题变量定义（通过 @theme 指令）
  * 这些变量可以在整个项目中通过 var() 引用
  * Tailwind v4+ 会将这些变量自动注册为 CSS 变量
  */
:root {
    /* 阴影定义 */
    --shadow-sm: 0 1px 1px 0 rgb(0 0 0 / 0.05), 0 1px 2px 0 rgb(0 0 0 / 0.02);

    /* 灰色调色板（从浅到深 50-950） */
    --color-gray-50: #f9fafb;
    /* 最浅灰 */
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    /* 默认边框色 */
    --color-gray-300: #bfc4cd;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    /* 中等灰度 */
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    /* 深灰 */
    --color-gray-900: #111827;
    --color-gray-950: #030712;
    /* 最深灰 */

    /* 紫色调色板（用于主品牌色） */
    --color-violet-50: #f1eeff;
    --color-violet-100: #e6e1ff;
    --color-violet-500: #8470ff;
    /* 主紫色 */
    --color-violet-600: #755ff8;
    /* 悬停状态 */
    --color-violet-700: #5d47de;
    /* 按下状态 */
    /* ...其他紫色阶省略... */

    /* 天蓝色调色板（用于信息提示） */
    --color-sky-50: #e3f3ff;
    --color-sky-500: #67bfff;
    /* 主要信息色 */
    /* ...其他天蓝色阶省略... */

    /* 绿色调色板（用于成功状态） */
    --color-green-500: #3ec972;
    /* 成功提示色 */
    /* ...其他绿色阶省略... */

    /* 红色调色板（用于错误状态） */
    --color-red-500: #ff5656;
    /* 错误提示色 */
    /* ...其他红色阶省略... */

    /* 黄色调色板（用于警告状态） */
    --color-yellow-500: #f0bb33;
    /* 警告提示色 */
    /* ...其他黄色阶省略... */

    /* 字体定义 */
    --font-inter: "Inter", "sans-serif";
    /* 使用前面导入的 Inter 字体 */

    /* 文本尺寸系统（响应式排版） */
    --text-xs: 0.75rem;
    /* 12px */
    --text-xs--line-height: 1.5;
    /* 18px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-sm--line-height: 1.5715;
    /* 22px */
    /* ...其他文本尺寸省略... */
    --text-6xl: 3.75rem;
    /* 60px */
    --text-6xl--line-height: 1.2;

    /* 响应式断点 */
    --breakpoint-xs: 480px;
    /* 小屏幕断点 */
}

/**
  * 基础层样式（Tailwind v4 兼容性处理）
  * -------------------------------------------------------------------
  * Tailwind v4 默认将边框色改为 currentColor，
  * 这里保持 v3 的行为（使用 gray-200 作为默认边框色）
  * 作用范围包括：
  * - 所有元素 (*)
  * - 伪元素 (::after, ::before)
  * - 全屏 API 元素 (::backdrop)
  * - 文件选择按钮 (::file-selector-button)
  */
@layer base {

    *,
    ::after,
    ::before,
    ::backdrop,
    ::file-selector-button {
        border-color: var(--color-gray-200, currentColor);
        /* 回退到 currentColor */
    }
}